<!doctype html>
{php}
    $static = '/static/home/';
{/php}
<!--[if IE 7]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8" />
    <title>{$siteConfig['seo_title']}</title>
    <meta name="apple-mobile-web-app-title" content="{$siteConfig['seo_title']}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="{$static}images/favicon.ico">
    <link href="{$static}css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/icons.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/app.min.css" rel="stylesheet" type="text/css" />
    <link href="{$static}css/style.css" rel="stylesheet" type="text/css" />
</head>

<body data-sidebar="dark">

<!-- Begin page -->
<div id="layout-wrapper">

    {include file='public/mine_topbar' /}
    {include file='public/mine_left' /}

    <!-- ============================================================== -->
    <!-- Start right Content here -->
    <!-- ============================================================== -->
    <div class="main-content">

        <div class="page-content">
            <div class="container-fluid">

                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-flex align-items-center justify-content-between">
                            <h4 class="mb-0 font-size-18">充值中心</h4>

                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="javascript: void(0);">银管家</a></li>
                                    <li class="breadcrumb-item"><a href="{:url('order/index')}">充值中心</a></li>
                                    <li class="breadcrumb-item active">代 充</li>
                                </ol>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- end page title -->

                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <p class="card-title-desc">提交您的充值信息</p>
                                <div class="form-group row">
                                    <label class="col-md-2 col-xs-12 col-form-label"></label>
                                    <div class="col-md-6 col-xs-12 mb-2">
                                        <a href="{:url('order/index')}" class="btn btn-success js-search">返回订单中心</a>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-xs-12 col-form-label">充值用户ID</label>
                                    <div class="col-md-6 col-xs-12 mb-2">
                                        <input class="form-control" type="text" name="accountName" placeholder="请输入充值用户的id，并点击查询按钮，确认该用户是否存在"/>
                                        <em for="accountName" class="invalid"></em>
                                    </div>
                                    <div class="col-md-2 col-xs-12 mb-2">
                                        <button type="button" class="btn btn-primary btn-block" id="search">查 询</button>
                                    </div>
                                </div>

                                <div class="form-group row mb-25">
                                    <label class="col-md-2 col-form-label">充值金额</label>
                                    <div class="col-md-6">
                                        <input class="form-control" type="text" name="amount" placeholder="请输入充值金额"/>
                                        <em for="amount" class="invalid"></em>
                                    </div>
                                </div>

                                <div class="form-group row">
                                    <label class="col-md-2 col-form-label"></label>
                                    <div class="col-md-6">
                                        <button type="button" class="btn btn-primary btn-block js-ajax-submit" >确认充值</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- end row -->

            </div> <!-- container-fluid -->
        </div>
        <!-- End Page-content -->

    </div>
    <!-- end main content-->

</div>
<!-- END layout-wrapper -->

<!-- JAVASCRIPT -->
<script src="{$static}libs/jquery/jquery.min.js"></script>
<script src="{$static}libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="{$static}libs/metismenu/metisMenu.min.js"></script>
<script src="{$static}libs/simplebar/simplebar.min.js"></script>
<script src="{$static}libs/node-waves/waves.min.js"></script>
<script src="{$static}libs/layer/layer.js"></script>

<script src="{$static}js/app.js"></script>

<script type="text/javascript">
    $('#search').click(function () {
        var accountName = $('input[name=accountName]').val();
        $.ajax({
            url: "{:url('order/getUser')}",
            type: "POST",
            data: {uid: accountName},
            dataType: 'json',
            beforeSend: function() {
                $('#search').text('正在查询...').addClass('btn-gray').attr('disabled', 'disabled');
            },
            success: function (res) {
                if (res.errorCode === 200) {
                    if(res.data.isExist === 1){
                        layer.alert('用户合法，请继续操作');
                    }else{
                        layer.alert('用户不存在', {
                            title: '提示',
                            icon: 2
                        });
                    }
                } else {
                    layer.alert(res.message, {
                        title: '提示',
                        icon: 2
                    });
                }
            },
            complete: function(){
                $('#search').text('查询').removeClass('btn-gray').removeAttr('disabled');
            }
        });
    });

    $('.js-ajax-submit').click(function () {
        var accountName = $('input[name=accountName]').val();
        var amount = $('input[name=amount]').val();

        var data = {
            uid: accountName,
            amount: amount
        };
        $.ajax({
            url: "{:url('Order/recharge')}",
            type: "POST",
            data: data,
            dataType: 'json',
            beforeSend: function() {
                $('.js-ajax-submit').text('正在处理...').addClass('btn-gray').attr('disabled', 'disabled');
            },
            success: function (res) {
                if (res.errorCode === 200) {
                    layer.confirm('充值成功', {
                        btn:['确定']
                    },function (index) {
                        layer.close(index);
                        $('input[name=amount]').val('');
                    });
                } else {
                    layer.alert(res.message, {
                        title: '提示',
                        icon: 2
                    });
                }
            },
            complete: function(){
                $('.js-ajax-submit').text('确认充值').removeClass('btn-gray').removeAttr('disabled');
            }
        });
    });
</script>
</body>
</html>
